<template>
  <a-card :bordered="false" class="card-area">
    <a-button @click="reset">
      重置
    </a-button>
    <a-calendar
      v-model="currDate"
      @select="onDaySelect"
      @panelChange="onPanelChange">
      <template slot="dateCellRender" slot-scope="value">
        <div v-if="isHoliday(value)">
          <a-popconfirm
            :disabled="isBtnDisabled(value)"
            title="把节假日设置为工作日？"
            ok-text="确定"
            cancel-text="取消"
            placement="bottomLeft"
            @confirm="updateHoliday"
          >
            <a-button type="primary" shape="circle" style="background: #f56c6c;border-style: none" :disabled="isBtnDisabled(value)">假</a-button>
          </a-popconfirm>
        </div>
        <div v-else>
          <a-popconfirm
            :disabled="isBtnDisabled(value)"
            title="把工作日设置为节假日？"
            ok-text="确定"
            cancel-text="取消"
            placement="bottomLeft"
            @confirm="updateHoliday"
          >
            <a-button type="primary" shape="circle" style="background: steelblue;border-style: none" :disabled="isBtnDisabled(value)">班</a-button>
          </a-popconfirm>
        </div>
      </template>
    </a-calendar>
  </a-card>
</template>
<script>
  import moment from 'moment'
  export default {
    data () {
      return {
        paneData: [],
        currDate: moment()
      }
    },
    methods: {
      isHoliday (value) {
        let formatDate = value.format('YYYY-MM-DD')
        return this.paneData.find(i => i && i.batchDate === formatDate && i.holidayFlag === 'Y')
      },
      isBtnDisabled (value) {
        if (value.month() !== this.currDate.month()) {
          return true
        } else {
          return false
        }
      },
      onPanelChange (value, mode) {
        this.getPaneData(value)
      },
      onDaySelect (value, mode) {
        this.currDate = value
      },
      reset(){
        this.currDate = moment()
        this.getPaneData (this.currDate.format('YYYY-MM-DD'))
      },
      getPaneData (date) {
        let dateFormat =/^(\d{4})-(\d{2})-(\d{2})$/;
        let dateStr =""
        if(dateFormat.test(date)){
          dateStr = date
        } dateStr = moment(date).format('YYYY-MM-DD')
        this.$get('holiday/getMonth', {
          dateStr
        }).then((r) => {
          this.paneData = r.data
          console.log(this.paneData)
        })
      },
      updateHoliday () {
        let dateStr = this.currDate.format('YYYY-MM-DD')
        this.$get('holiday/update', {
          dateStr
        }).then((res) => {
          this.getPaneData(this.currDate)
          if (res.data.status) {
            this.$message.success(res.data.message)
            this.getPaneData(this.currDate)
          } else {
            this.$message.error(res.data.message)
          }
        })
      }
    },
    mounted () {
      this.getPaneData(this.currDate)
    }
  }
</script>
